<template>
    <div class="foucus">
       <v-header title="我的好友">
         <p slot="right" @click="showSearch = true"><i class="fa fa-search" aria-hidden="true"></i></p>
       </v-header>
      <div :style="{height: swiperHeight}">
        <not-data v-if="friendsList.length === 0" tip="空空如也~"></not-data>
        <fridends-list :data="friendsList" v-else>
        </fridends-list>
      </div>


      <div v-transfer-dom>
        <popup v-model="showSearch" height="100%" width="100%" class="popupWrapper" position="right">
          <div class="popup">
            <search-header :searchPlaceHolder="searchPlaceholder" v-model.trim="seachValue" @submitSearch="submitSearch">
              <p slot="button" @click="toggle()">取消</p>
            </search-header>
          </div>
          <div :style="{height: swiperHeight}">
            <scroll ref="scroll" style="overflow: hidden; height: 100%">
                <div>
                    <!-- 搜索结果 -->
                    <div class="bottomLineWrapper" v-for="item in searchList" :key="item.id" @click="sendMessage(item)">
                          <div class="centerbody">
                            <cell-box class="cell-wrapper">
                                <div style="display: flex;">
                                    <img :src="item.headUrl" alt="" class="headerimage" @click.stop="handlePersonalMessage(item.id)">
                                    <div :style="{width: cellContentWith+'px'}" style="padding: 0 7px;">
                                        <div>{{item.nickname}}</div>
                                        <div class="signature"> {{ (item.signature == undefined || item.signature == null) ? "这个家伙很懒，什么都没有留下" : item.signature }}</div>
                                    </div>
                                </div>
                            </cell-box>
                          </div>
                    </div>
                    <not-data v-if="searchList.length === 0" tip="空空如也~"></not-data>
                </div>
            </scroll>
       </div>
        </popup>
      </div>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import imageTop from '@/assets/img/default_avatar.png'
import SearchHeader from '@/components/seach-header/seach-header'
import { Cell, CellBox, XInput, Group, Calendar, XTextarea, XButton, Popup, TransferDom } from 'vux'
import axios from '@/api/axiosApi'
import notData from '@/components/not-data/not-data'
import fridendsList from '@/components/fridends-list/fridends-list'
import { localUser } from '@/assets/js/local'
import Scroll from '@/components/scroll/scroll'

export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      imageTop: imageTop,
      swiperHeight: '500px',
      friendsList: [],
      user: {},
      showSearch: false,
      searchPlaceholder: '搜索好友',
      seachValue: '',
      searchList: []
    }
  },
  created () {
    this.user = localUser.get() || {}
    this.cellContentWith = window.innerWidth - 55 - 95
    this.getAllFriends()
  },
  methods: {
    getAllFriends () {
      axios.get(this, 'v1/friends/' + localUser.get('id'), null, (data) => {
        const list = []
        data.forEach((item) => {
          if (item == null) return
          let indexName = ''
          if ((/^[a-zA-Z]/).test(item.nicknamePinYin)) {
            indexName = item.nicknamePinYin.substr(0, 1).toUpperCase()
          } else {
            indexName = '#'
          }
          const find = list.findIndex(o => o.name === indexName)
          if (find > -1) {
            item.name = item.nickname
            list[find].items.push(item)
          } else {
            list.push({
              name: indexName,
              items: [item]
            })
          }
        })
        list.sort((a, b) => {
          return a.name > b.name
        })
        this.friendsList = list
      })
    },
    handlePersonalMessage (id) {
      this.$router.push('/user/archives/' + id)
    },
    sendMessage (item) {
      this.$store.dispatch('setChatObject', item)
      this.$router.push('/chat')
    },
    toggle () {
      this.showSearch = false
    },
    submitSearch () {
      let searchTempList = []
      this.friendsList.forEach(item => {
        item.items.forEach(element => {
          if (element.nickname.indexOf(this.seachValue) > -1 || element.nicknamePinYin.indexOf(this.seachValue) > -1) {
            searchTempList.push(element)
          }
        })
      })
      this.searchList = searchTempList
    }
  },
  mounted () {
    this.swiperHeight = window.innerHeight - 64 + 'px'
  },
  components: {
    VHeader,
    Cell,
    CellBox,
    imageTop,
    XInput,
    Calendar,
    XTextarea,
    XButton,
    Group,
    Scroll,
    notData,
    localUser,
    Popup,
    TransferDom,
    SearchHeader,
    fridendsList
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.foucus {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height:100%;
}

.headerimage {
    width:40px;
    height:40px;
}
.centerbody {
    background-color:white
}

.signature {
    font-size: 12px;
    color:#C9C9CE;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

.cell-wrapper {
  display flex
  justify-content: space-between;
}


.hrline {
    height:1px;border:none;border-top:1px solid #E8E8E8;
    margin-left:3%;
}

.focusbutton button {
  border 1px solid #E8E8E8
  border-radius 2px
  padding 4px 12px
  background none
  width 70px
}

.focusbutton button span {
   color: #E8E8E8
}

.jiafocusbutton button {
  border 1px solid #E55252
  border-radius 2px
  padding 4px 12px
  background none
  width 70px
}

.jiafocusbutton button span {
   color: #E55252
}

.bottomLineWrapper {
  border-bottom-style solid
  border-width:1px
  border-color: #E4E4E4
  .cell-wrapper {
    img {
      border-radius 50%
    }
  }
}

.popupWrapper {
  background-color #fff
}


.history-wrapper {
  span {
    display: inline-block;
    font-size: $font-size-desc;
    color: $color-theme;
    line-height: 1;
    padding: 4px 9px;
    border: 1px solid $color-border;
    margin-right: 15px;
    margin-bottom: 6px;
    border-radius: 3px;
    &:hover {
      border-color: $color-border
    }
  }
}

.searchBlock{
  padding 15px
  position relative;
}

.title {
  line-height 18px;
  position: relative;
  padding-left: 12px;
  margin-bottom: 9px;
  font-size: $font-size-title;
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height 16px;
    border-radius: 10px;
    background: $color-theme;
    margin-right: 6px;
  }
  span {
    float: right;
    color: $color-text-2;
    font-size: $font-size-desc;
    font-weight: normal;
    i {
      margin-right: 3px;
    }
  }
}
</style>
